<template>
  <button :class="[type]">
    <slot />
  </button>
</template>
<script>
import { reactive, toRefs } from 'vue'
export default {
  name: 'CButton',
  props: {
    type: {
      type: String,
      default: 'primary'
    },
    size: {
      type: String,
      default: 'default'
    }
  },
  setup() {
    const RData = reactive({})
    return {
      ...toRefs(RData)
    }
  }
}
</script>

<style scoped>
button {
  border: none;
  color: #FFF;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
}
.primary {
  background-color: var(--primary-color);
}
.danger {
  background-color: var(--danger-color);
}

</style>
